$f: 19.2;
h1 {
  margin: 0;
  padding: 0;
}
*, *::after, *::before {
  box-sizing: border-box;
}
img{
  object-fit: cover;
}

.section1{
  width: 100%;
  margin: 86/$f+vw 0 0 0;
  position: relative;
  .position{
    width: 1400/$f+vw;
    height: 138/$f+vw;
    border-radius: 10/$f+vw;
    background: #FFF;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.10);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -69/$f+vw;
    display: flex;
    align-items: center;
    justify-content: center;
    .joke{
      display: flex;
      align-items: center;
      height: 48/$f+vw;
      .xz{
        position: relative;
        &.on{
          .hide{
            display: block;
          }
        }
        .show{
          width: 135/$f+vw;
          height: 48/$f+vw;
          padding: 13/$f+vw 12/$f+vw;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-radius: 4px 0px 0px 4px;
          border: 1px solid rgba(0, 0, 0, 0.10);
          background: #FFF;
          cursor: pointer;
          p{
            color: rgba(0, 0, 0, 0.60);
            font-size: 16/$f+vw;
            font-style: normal;
            font-weight: 400;
          }
          svg{
            width: 16/$f+vw;
            height: 16/$f+vw;
          }
        }
        .hide{
          width: 100%;
          position: absolute;
          top: 100%;
          left: 0;
          border-radius: 4px 0px 0px 4px;
          border: 1px solid rgba(0, 0, 0, 0.1);
          background: #FFF;
          border-top: none;
          display: none;
          div{
            font-size: 14/$f+vw;
            line-height: 40/$f+vw;
            color: rgba(0, 0, 0, 0.60);
            padding: 0 5%;
            cursor: pointer;
          }
        }
      }
      .posi_search{
        display: flex;
        width: 487/$f+vw;
        height: 48/$f+vw;
        padding: 0 12/$f+vw;
        justify-content: space-between;
        align-items: center;
        border: 1px solid rgba(0, 0, 0, 0.10);
        background: #FFF;
        border-left: none;
        input{
          width: 100%;
          height: 100%;
          border: none;
          font-size: 16/$f+vw;
          font-style: normal;
          font-weight: 400;
          line-height: 130%; /* 20.8px */
          &::placeholder{
            color: rgba(0, 0, 0, 0.60);
          }
        }
        .xl{
          svg{
            width: 16/$f+vw;
          }
        }
      }
      .blue{
        width: 96/$f+vw;
        height: 48/$f+vw;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0px 4px 4px 0px;
        background: #1A53F0;
        color: #FFF;
        font-size: 16/$f+vw;
        font-style: normal;
        font-weight: 400;
        line-height: 130%; /* 20.8px */
        text-transform: capitalize;
        cursor: pointer;
      }
    }
  }
  img{
    width: 100%;
  }
}

.section2{
  padding: 230/$f+vw 260/$f+vw 60/$f+vw 260/$f+vw;
  &>h1{
    color: #000;
    font-size: 40/$f+vw;
    font-style: normal;
    font-weight: 600;
    line-height: 40/$f+vw;
    letter-spacing: 2/$f+vw;
    text-align: center;
    span{
      color: #1A53F0;
    }
  }
  .content{
    margin: 80/$f+vw 0 0 0;
    display: flex;
    align-items: center;
    .img{
      width: 756/$f+vw;
      height: 568/$f+vw;
      overflow: hidden;
      img{
        width: 100%;
        height: 100%;
        transition: 1s;
      }
      &:hover{
        img{
          transform: scale(1.05);
        }
      }
    }
    .r{
      width: 601/$f+vw;
      margin: 0 0 0 43/$f+vw;
      .headline{
        display: flex;
        align-items: center;
        margin: 0 0 57/$f+vw;
        h1{
          color: #000;
          font-size: 36/$f+vw;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
          margin: 0 33/$f+vw 0 0;
        }
        a{
          color: #1A53F0;
          font-size: 20/$f+vw;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
        }
      }
      .p1{
        color: rgba(0, 0, 0, 0.90);
        font-size: 20/$f+vw;
        font-style: normal;
        font-weight: 400;
        line-height: 32/$f+vw; /* 160% */
        text-transform: capitalize;
        margin: 0 0 51/$f+vw;
      }
      .pick{
        .list{
          display: flex;
          &:not(:last-child) {
            margin: 0 0 25/$f+vw;
          }
          span{
            width: 6/$f+vw;
            height: 6/$f+vw;
            background: #1A53F0;
            border-radius: 50%;
            margin: 12/$f+vw 10/$f+vw 0 0;
          }
          p{
            width: 585/$f+vw;
            color: rgba(0, 0, 0, 0.60);
            font-size: 16/$f+vw;
            font-style: normal;
            font-weight: 400;
            line-height: 32/$f+vw; /* 160% */
            text-transform: capitalize;
          }
        }
      }
    }
  }

  .content2{
    margin: 40/$f+vw 0 0 0;
    display: flex;
    justify-content: space-between;
    .img{
      width: 766/$f+vw;
      height: 411/$f+vw;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .r{
      display: flex;
      gap: 0 15/$f+vw;
      margin: 0 0 0 11/$f+vw;
      .content2Swiper{
        width: 621/$f+vw;
      }

      .item{
        width: 100%;
        height: 411/$f+vw;
        background: linear-gradient(180deg, #EEF0F8 0%, #FBFCFF 100%);
        .icon{
          margin: 8/$f+vw auto 0;
          width: 248/$f+vw;
          img{
            width: 100%;
          }
        }
        .text{
          .p1{
            color: #000;
            font-size: 20/$f+vw;
            font-style: normal;
            font-weight: 600;
            line-height: 28/$f+vw; /* 140% */
            letter-spacing: 2px;
            margin: 0 0 8/$f+vw;
            text-align: center;
          }
          .p2{
            width: 272/$f+vw;
            margin: 0  auto;
            color: rgba(0, 0, 0, 0.90);
            font-size: 20/$f+vw;
            font-style: normal;
            font-weight: 400;
            line-height: 32/$f+vw; /* 160% */
            text-transform: capitalize;
          }
        }
      }
    }
  }
}

.section3{
  padding: 100/$f+vw 260/$f+vw 60/$f+vw 260/$f+vw;
  &>h1{
    color: #000;
    font-size: 40/$f+vw;
    font-style: normal;
    font-weight: 600;
    line-height: 40/$f+vw;
    letter-spacing: 2/$f+vw;
    text-align: center;
    span{
      color: #1A53F0;
    }
  }
  .content{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    flex-wrap: wrap;
    gap: 60/$f+vw 40/$f+vw;
    margin: 70/$f+vw 0 0 0;

    .item{
      width: 100%;
      position: relative;
      z-index: 1;
      &:hover{
        .img{
          img{
            transform: scale(1.05);
          }
        }
      }
      .img{
        width: 100%;
        height: 300/$f+vw;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
          transition: .6s ease;
        }
      }
      .text{
        background: #F1F3F9;
        position: relative;
        padding: 65/$f+vw 20/$f+vw 40/$f+vw 20/$f+vw;
        z-index: 1;
        .circle{
          width: 90/$f+vw;
          height: 90/$f+vw;
          position: absolute;
          left: 20/$f+vw;
          top: -45/$f+vw;
          z-index: 1;
          img{
            width: 100%;
            height: 100%;
          }
        }
        h1{
          color: #000;
          font-size: 20/$f+vw;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
          margin: 0 0 20/$f+vw;
        }
        .dis{
          display: flex;
          gap: 0 8/$f+vw;
          .list{
            height: 34/$f+vw;
            background: rgba(26, 83, 240, 0.10);
            width: fit-content;
            padding: 0 10/$f+vw;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #1A53F0;
            font-size: 16/$f+vw;
            font-style: normal;
            font-weight: 300;
          }
        }
      }
    }
  }
  .more{
    width: 108/$f+vw;
    height: 38/$f+vw;
    border-radius: 4/$f+vw;
    background: #1A53F0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 18/$f+vw;
    font-style: normal;
    font-weight: 400;
    margin: 40/$f+vw auto 0;
  }
}

.section4{
  padding: 100/$f+vw 260/$f+vw 60/$f+vw 260/$f+vw;
  &>h1{
    color: #000;
    font-size: 40/$f+vw;
    font-style: normal;
    font-weight: 600;
    line-height: 40/$f+vw;
    letter-spacing: 2/$f+vw;
    text-align: center;
    span{
      color: #1A53F0;
    }
  }
  .content{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    flex-wrap: wrap;
    gap: 40/$f+vw;
    margin: 80/$f+vw 0 0 0;

    .item{
      width: 100%;
      position: relative;
      z-index: 1;
      padding: 25/$f+vw 20/$f+vw;
      background: #F1F3F9;
      &:hover{
        .img{
          img{
            transform: scale(1.05);
          }
        }
      }
      .img{
        width: 100%;
        height: 275/$f+vw;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
          transition: .6s ease;
        }
      }
      .text{
        background: #F1F3F9;
        position: relative;
        padding: 25/$f+vw 20/$f+vw 30/$f+vw 20/$f+vw;
        z-index: 1;

        h1{
          color: #000;
          font-size: 28/$f+vw;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
          margin: 0 0 13/$f+vw;
        }
        .p1{
          color: #000;
          font-size: 20/$f+vw;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
          margin: 0 0 15/$f+vw;
        }
        .dis{
          display: flex;
          gap: 0 8/$f+vw;
          .list{
            height: 34/$f+vw;
            background: rgba(26, 83, 240, 0.10);
            width: fit-content;
            padding: 0 10/$f+vw;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #1A53F0;
            font-size: 16/$f+vw;
            font-style: normal;
            font-weight: 300;
          }
        }
      }
    }
  }
  .more{
    width: 108/$f+vw;
    height: 38/$f+vw;
    border-radius: 4/$f+vw;
    background: #1A53F0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 18/$f+vw;
    font-style: normal;
    font-weight: 400;
    margin: 40/$f+vw auto 0;
  }
}

.section5{
  padding: 100/$f+vw 260/$f+vw 60/$f+vw 260/$f+vw;
  &>h1{
    color: #000;
    font-size: 40/$f+vw;
    font-style: normal;
    font-weight: 600;
    line-height: 40/$f+vw;
    letter-spacing: 2/$f+vw;
    text-align: center;
    span{
      color: #1A53F0;
    }
  }
  .content{
    margin: 80/$f+vw 0 0 0;
    .hySwiper{
      width: 100%;
      a{
        width: 100%;
        display: block;
        position: relative;
        z-index: 1;
        background: #F1F3F9;
        &:hover{
          .img{
            img{
              transform: scale(1.05);
            }
          }
        }
        .img{
          width: 100%;
          height: 256/$f+vw;
          overflow: hidden;
          img{
            width: 100%;
            height: 100%;
            transition: .6s ease;
          }
        }
        .text{
          background: #F1F3F9;
          position: relative;
          padding: 30/$f+vw 14/$f+vw 40/$f+vw 20/$f+vw;
          z-index: 1;
  
          h1{
            color: #000;
            font-size: 20/$f+vw;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            margin: 0 0 16/$f+vw;
          }
          p{
            width: 286/$f+vw;
            overflow: hidden;
            color: rgba(0, 0, 0, 0.60);
            text-overflow: ellipsis;
            font-size: 16/$f+vw;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            white-space: nowrap;
          }
  
        }
      }
    }
  }
  .more{
    width: 108/$f+vw;
    height: 38/$f+vw;
    border-radius: 4/$f+vw;
    background: #1A53F0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 18/$f+vw;
    font-style: normal;
    font-weight: 400;
    margin: 40/$f+vw auto 0;
  }
}
@media screen and (max-width: 1024px) {
  .section1{
    margin: 60px 0 0 0;
    position: relative;
    z-index: 6;
    .img{
      height: 250px;
    }
    .position{
      width: 90%;
      height: auto;
      padding: 25px 0;
      .joke{
        width: 100%;
        padding: 0 5%;
        height: auto;
        flex-wrap: wrap;
        align-items: unset;
        .xz{
          margin: 0 0 10px;
          width: 100%;
          .show{
            width: 100%;
            height: 40px;
            border-radius: 5px;
            padding: 0 15px;
            p{
              font-size: 14px;
              margin: 0 5px 0 0;
            }
            svg{
              height: fit-content;
              width: 12px;
            }
          }
          .hide{
            div{
              font-size: 14px;
              line-height: 40px;
            }
          }
        }
        .posi_search{
          border: 1px solid rgba(0, 0, 0, 0.1) !important;
          flex: 1;
          height: 40px;
          input{
            padding: 0 15px;
            font-size: 14px;
          }
        }
        .blue{
          padding: 0 15px;
          height: 40px;
          font-size: 14px;
          width: fit-content;
        }
      }
    }
  }
  .section2{
    padding: 45px 5% 40px 5%;
    &>h1{
      font-size: 20px;
      line-height: 25px;
    }
    .content{
      margin: 25px 0 0 0;
      flex-direction: column;
      .img{
        width: 100%;
        height: auto;
      }
      .r{
        width: 100%;
        margin: 15px 0 20px 0;
        .headline{
          margin: 0 0 15px;
          h1{
            font-size: 18px;
            margin: 0 10px 0 0;
          }
          a{
            font-size: 13px;
          }
        }
        .p1{
          font-size: 14px;
          line-height: 28px;
          margin: 0 0 20px;
        }
        .pick{
          .list{
            span{
              width: 6px;
              height: 6px;
              margin: 10px 5px 0 0;
            }
            p{
              width: 100%;
              font-size: 14px;
              line-height: 28px;
              flex: 1;
            }
          }
        }
      }
    }
    .content2{
      flex-direction: column;
      .img{
        width: 100%;
        height: auto;
      }
      .r{
        gap:15px 0;
        margin: 20px 0 25px 0;
        flex-wrap: wrap;
        .content2Swiper{
          width: 100%;
        }
        .item{
          width: 100%;
          height: auto;
          padding: 20px 5%;
          .icon{
            width: 100px;
            margin: 0 auto 25px;
          }
          .text{
            .p1{
              font-size: 15px;
              line-height: 1;
              margin: 0 0 15px;
            }
            .p2{
              width: 100%;
              font-size: 13px;
              line-height: 25px;
            }
          }
        }
      }
    }
  }
  .section3{
    padding: 40px 5%;
    &>h1{
      font-size: 20px;
      line-height: 25px;
    }
    .content{
      width: 100%;
      gap: 20px 0;
      margin: 15px 0 0 0;
      flex-direction: column;
      grid-template-columns: repeat(1,1fr);
      .item{
        width: 100%;
        .img{
          height: auto;
        }
        .text{
          padding: 20px 5% 20px 5%;
          .circle{
            width: 45px;
            height: 45px;
            position: static;
            margin: 0 0 20px;
          }
          h1{
            font-size: 18px;
            margin: 0 0 10px;
          }
          .dis{
            gap: 0 10px;
            .list{
              height: 30px;
              padding: 0 10px;
              font-size: 12px;
            }
          }
        }
      }
    }
    .more{
      padding: 0 15px;
      border-radius: 7px;
      height: 40px;
      font-size: 14px;
      width: fit-content;
      margin: 40px auto 0;
    }
  }
  .section4{
    padding: 40px 5%;
    &>h1{
      font-size: 20px;
      line-height: 25px;
    }
    .content{
      width: 100%;
      gap: 20px 0;
      margin: 15px 0 0 0;
      flex-direction: column;
      grid-template-columns: repeat(1,1fr);
      .item{
        width: 100%;
        padding: 15px;
        .img{
          height: auto;
        }
        .text{
          padding: 20px 0;
          .circle{
            width: 45px;
            height: 45px;
            position: static;
            margin: 0 0 20px;
          }
          h1{
            font-size: 18px;
            margin: 0 0 10px;
          }
          .p1{
            font-size: 14px;
            margin: 0 0 15px;
          }
          .dis{
            gap: 0 10px;
            .list{
              height: 30px;
              padding: 0 10px;
              font-size: 12px;
            }
          }
        }
      }
    }
    .more{
      padding: 0 15px;
      border-radius: 7px;
      height: 40px;
      font-size: 14px;
      width: fit-content;
      margin: 40px auto 0;
    }
  }
  .section5{
    padding: 40px 5%;
    &>h1{
      font-size: 20px;
      line-height: 25px;
    }
    .content{
      width: 100%;
      margin: 15px 0 0 0;
      .hySwiper{
        a{
          width: 100%;
          .img{
            height: auto;
          }
          .text{
            padding: 20px 5% 25px 5%;
            .circle{
              width: 45px;
              height: 45px;
              position: static;
              margin: 0 0 20px;
            }
            h1{
              font-size: 18px;
              margin: 0 0 10px;
            }
            p{
              width: 100%;
              font-size: 14px;
              margin: 0 0 15px;
              white-space: unset;
            }
  
          }
        }
      }
    }
    .more{
      padding: 0 15px;
      border-radius: 7px;
      height: 40px;
      font-size: 14px;
      width: fit-content;
      margin: 40px auto 0;
    }
  }
}